import React, { Component } from 'react'
import "../assert/css/coupon.css"
import { userinfo,dateFmt } from '../utils/getUserInfo'
import { couponRequest } from '../request/coupon_request'
import Header from "../components/DefaultHeader"

export default class Coupon extends Component {
    state={
        userList:[
            {content:[]},
            {content:[]},
            {content:[]},
        ],
        index:0
    }
    UNSAFE_componentWillMount(){
        var uid = userinfo().uid
        couponRequest(uid).then(res => {
            this.setState({ userList: res.list })
        })
    }
    render() {
        const {userList,index} = this.state
        return (
            <div className="coupon-container">
            <Header title="优惠卷"/>
            <div className="tabs">
                <div className={index === 0 ? 'active' : ""} onClick={() => this.setState({ index: 0 })}>未使用</div>
                <div className={index === 1 ? 'active' : ""} onClick={() => this.setState({ index: 1 })}>已使用</div>
                <div className={index === 2 ? 'active' : ""} onClick={() => this.setState({ index: 2 })}>已失效</div>
            </div>
            <div className="list">
                {
                    userList[index].content.map(item=>(
                        <div className="item" key={item.id}>
                        <div className="content">
                            <div className="price">
                                <h2>&yen; <span>{item.money}</span></h2>
                                <small className="tips">满{item.limit_money}元可用</small>
                            </div>
                            <div>
                                <p>{item.title}</p>
                                <small>{dateFmt(item.begintime)}至{dateFmt(item.endtime)}</small>
                            </div>
                        </div>
                        <div className="rules">
                        {item.description}
                        </div>
                    </div>
                    ))
                }
               
               
            </div>
        </div>
        )
    }
}
